<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogMobileVisible" @close="onClose">
      <el-form ref="dataForm" :model="dataForm" :rules="dataFormRules">
        <el-form-item prop="name_api" :label="$t('login.phoneNumber')">
          <el-input v-model="dataForm.name_api" :placeholder="$t('login.pleaseEnterContent')" class="input-with-select">
            <template slot="append">
              <el-button :disabled="mobileCodeDisabled" @click="onMobileCode">
                {{ mobileCodeText }}

              </el-button>
            </template>

          </el-input>
        </el-form-item>
        <el-form-item prop="code" :label="$t('login.verificationCode')">
          <el-input v-model="dataForm.code" />
        </el-form-item>
        <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleBind('dataForm')">{{ $t('common.submitNow') }}</el-button>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { Message } from 'element-ui'
import { loginMobileCode } from '@/api/code'
import { bindingContact } from '@/api/merchant'

export default {
  name: 'BindMobile',
  props: ['dialogMobile', 'mobile'],
  data() {
    return {
      mobileCodeDisabled: false,
      mobileCodeText: this.$t('login.sendVerificationCode'),
      dataForm: {
        name_api_type: 'mobile',
        name_api: '',
        code: ''
      },
      loading: false,
      dialogMobileVisible: this.dialogMobile,
      dataFormRules: {
        name_api: [{ required: true, message: this.$t('login.pleaseEnterContent'), trigger: 'blur' }],
        code: [{ required: true, message: this.$t('login.cannotBeEmpty'), trigger: 'blur' }]
      },
      title: (this.mobile) ? this.$t('common.updateMobilePhoneNumber') : this.$t('common.bindMobilePhoneNumber')
    }
  },
  methods: {
    onMobileCode() {
      var _this = this
      if (!this.dataForm.name_api) {
        Message({
          message: this.$t('login.pleaseFillInYourPhoneNumberFirst'),
          type: 'error',
          duration: 1 * 1000
        })
        return
      }
      this.mobileCodeDisabled = true
      loginMobileCode({
        type: 'binding_contact',
        mobile: this.dataForm.name_api
      }).then(res => {
        this.startModelCountdown()
        Message({
          message: this.$t('login.successfullySentPleaseCheck'),
          type: 'success',
          duration: 1 * 1000
        })
      }).catch(res => {
        setTimeout(() => {
          _this.mobileCodeDisabled = false
        }, 2000)
      })
    },
    startModelCountdown() {
      let seconds = 60 * 5 // 设置倒计时的秒数

      const timer = setInterval(() => {
        if (seconds > 0) {
          this.mobileCodeText = `${seconds}s` // 更新显示的倒计时文本
          seconds-- // 每次递减1秒
        } else {
          clearInterval(timer) // 当倒计时结束时清除定时器
          this.mobileCodeText = this.$t('login.sendVerificationCode') // 可选：将倒计时文本重置为特定内容
          this.mobileCodeDisabled = false
        }
      }, 1000) // 每隔1秒执行一次
    },
    handleBind() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.loading = true

          var _this = this
          bindingContact(this.dataForm)
            .then((res) => {
              Message({
                message: res.message,
                type: 'success',
                duration: 2 * 1000,
                onClose() {
                  location.reload()
                }
              })
              // _this.loading = false
            })
            .catch((res) => {
              _this.loading = false
              return false
            })
        } else {
          return false
        }
      })
    },
    onClose() {
      this.$emit('onClose')
    }
  }
}
</script>
